<template>
  <div class="match-container">
    <el-drawer v-model="dialogFormVisible" size="50%" @close="close">
      <template #header>
        <h4>{{ title }}</h4>
      </template>
      <template #default>
        <div class="content">
          <vab-query-form>
            <vab-query-form-top-panel>
              <el-form inline @submit.prevent>
                <el-form-item>
                  <el-select
                    v-model="otherid"
                    style="width: 220px"
                    filterable
                    remote
                    :remote-method="handleSearch"
                    :loading="loading"
                    placeholder="请输入匹配会员昵称"
                    @change="handleSelect"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    />
                    <el-option v-if="isEmpty" disabled value="">
                      无匹配数据
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </vab-query-form-top-panel>
          </vab-query-form>
          <el-table v-loading="listLoading" :data="list">
            <el-table-column align="center" label="匹配会员" width="160">
              <template #default="{ row }">
                <div class="list-item">
                  <img class="list-item-avatar" alt="" :src="row.avatar" />
                  <div class="list-item-meta">
                    <div class="list-item-meta-name">
                      {{ row.username }}
                    </div>
                    <div class="list-item-meta-age">
                      <div>编号:{{ row.sn }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="匹配人"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <div v-if="row.maker_id === 0">系统</div>
                <div v-else>{{ row.realname }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="匹配时间"
              prop="created_at"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="操作"
              show-overflow-tooltip
              width="200"
            >
              <template #default="{ row }">
                <el-button text type="danger" @click="handleDelete(row)">
                  删除该匹配
                </el-button>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm.page"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script>
  import { getList, doDelete, doAdd } from '@/api/match'
  import { getMemberList } from '@/api/member'
  import { Search } from '@element-plus/icons-vue'
  import { debounce } from 'lodash-es'
  export default defineComponent({
    name: 'ManMatchDrawer',

    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        mid: '',
        gender: '',
        otherid: '',
        title: '',
        dialogFormVisible: false,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: { page: 1, pageSize: 10 },
        options: [],
        loading: false,
        isEmpty: false,
      })
      const showEdit = (row) => {
        state.title = '人工匹配'
        state.gender = row.gender
        state.mid = row.id
        state.dialogFormVisible = true
        searchData()
      }

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        searchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        searchData()
      }

      const searchData = async () => {
        state.queryForm.mid = state.mid
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      const handleDelete = (row) => {
        $baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await doDelete({ id: row.id })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await searchData()
        })
      }
      // 防抖处理（300ms）
      const debouncedSearch = debounce(async (query) => {
        if (!query) {
          state.options = []
          return
        }

        try {
          state.loading = true
          state.isEmpty = false
          // 替换为你的实际 API 调用
          const data = await getMemberList({
            keywords: query,
            gender: state.gender === 1 ? 2 : 1,
          })
          state.options = data.data
          state.isEmpty = !data.data?.length
        } catch (error) {
          $baseMessage('搜索失败', 'error', 'vab-hey-message-error')
        } finally {
          state.loading = false
        }
      }, 300)
      const handleSearch = (query) => {
        debouncedSearch(query)
      }
      const handleSelect = async (value) => {
        console.log(state)
        try {
          const { msg } = await doAdd({ otherid: value, mid: state.mid })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          searchData()
        } catch (error) {
          $baseMessage(msg, 'error', 'vab-hey-message-error')
        }
      }

      // 组件卸载时取消防抖
      onUnmounted(() => {
        debouncedSearch.cancel()
      })

      const close = () => {
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        showEdit,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        handleSearch,
        handleSelect,
        Search,
        close,
      }
    },
  })
</script>
<style lang="scss">
  .match-container {
    .el-drawer__header {
      height: 50px;
      padding: 0px 20px;
      margin-bottom: 0px;
      color: #000000;
      background-color: rgb(245, 245, 245);
    }

    .el-drawer__footer {
      text-align: center;
    }
  }

  .page-search {
    .el-select {
      width: 212px;
    }

    .el-input {
      width: 212px;
      border-left: 1px solid #e2ecfa;
      border-radius: 30px;
    }
  }
  .list-item {
    display: flex;

    &-avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    &-meta {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      margin-left: 10px;

      &-name {
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;

        &-sexicon {
          width: 16px;
          height: 16px;
          margin-left: 3px;
        }
      }

      &-age {
        display: flex;
        font-size: 12px;
        color: rgb(0 0 0 / 45%);
        div:nth-child(n + 1) {
          margin-right: 10px;
        }
      }

      &-time {
        display: flex;
        font-size: 14px;
        color: rgb(0 0 0 / 45%);
        div:nth-child(n + 1) {
          margin-right: 10px;
        }
      }

      &-btn {
        display: flex;
        font-size: 14px;
        color: rgb(0 0 0 / 45%);
        margin-top: 5px;
      }
    }
    &-desc {
      &-content {
        font-size: 14px;

        > span {
          text-align: left;
        }
      }
    }
  }
</style>
